<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>阅读全文</title>
    <link rel="stylesheet" type="text/css" href="/css/myioc/iconfont.css" />
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration: none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:none;
        color: #303133;
    }
</style>
<body style="background-color:#f5f6f7">
    <div id="app">
        <div  th:include="common/common-nav::head"></div>

        <div style="width: 65%;margin: 30px auto;background-color: white;border-radius: 10px;display: flex;flex-direction:column;">

            <h1 style="width:96%;margin: 10px auto;">
                <p>{{blog.blog.title}}</p>
            </h1>

            <div style="width: 90%;margin: 0 auto;">

                <h3 style="display: flex;justify-content:space-between;width:100%;margin: 20px auto">
                    <div style="display: flex;justify-content:space-between;width:80%;">
                        <span><i class="el-icon-user"></i>&nbsp;&nbsp;{{blog.user.nickname}}</span>
                        <span><i class="el-icon-alarm-clock"></i>&nbsp;&nbsp;{{blog.blog.postedTime}}</span>
                        <span><i class="el-icon-view"></i>&nbsp;&nbsp;{{blog.blog.readCount}}</span>
                        <span>分类:&nbsp;&nbsp;{{blog.type.type}}</span>
                        <div>
                            <i class="iconfont myiocnshoucang"></i>
                            <span>{{blog.blog.collectNum}}</span>
                        </div>
                    </div>
                    <div style="width:7%">
                        <el-button th:if="${session.SPRING_SECURITY_CONTEXT != null}" size="mini" type="primary" @click="addCollect()">
                            {{collectText}}
                        </el-button>
                    </div>
                </h3>

            </div>

            <div class="content" style="border: 1px solid #ccc;width: 90%;margin: 10px auto;">
                <div v-html="blog.content.documents"></div>
            </div>

            <div style="border: 1px solid #ccc;width: 90%;margin: 10px auto;">
                评论区
            </div>

        </div>
    </div>
</body>
<script th:inline="javascript">

    Vue.prototype.loginUser  = [[${session.SPRING_SECURITY_CONTEXT}]];

    new Vue({
        el:"#app",
        data(){
            return{
                blog:{
                    blog:{title:"",postedTime:"",readCount:""},
                    user:{nickname:""},
                    type:{type:""},
                    content:{documents:""}
                },
                searchTitle:"",
                collectText:"收藏"
            }
        },
        methods:{
            getBlogText: function(blogId){
                let that = this
                axios.get("/api/public/getBlogText/" + blogId).then(
                    function (resp){
                        that.blog = resp.data.data
                    }
                )

                if(this.loginUser!=null){
                    let collect = {bid:blogId}

                    axios.post("/api/hello/checkCollect",collect).then(function (resp){
                        if(resp.data.data){
                            console.log(resp.data.data)
                            that.collectText = "取消收藏"
                            return
                        }
                        that.collectText = "收藏"
                    })

                }

            },
            findByTitle:function(){
                if(this.searchTitle==null || this.searchTitle == ""){
                    this.$notify({
                        title: '搜索不能为空',
                        type: 'warning'
                    });
                    return
                }
                sessionStorage.setItem('searchTitle',this.searchTitle)
                window.location.href = "/"
            },

            addCollect(){

                let that = this

                if(this.collectText == "收藏"){

                    axios.post("/api/hello/addCollect/" + that.blog.blog.id).then(function (resp){
                        if(resp.data.data!=null){
                            that.collectText = "取消收藏"
                        }
                    })

                }else{
                    axios.post("/api/hello/cancelCollect/" + that.blog.blog.id).then(function (resp){
                        if(resp.data.data==true){
                            that.collectText = "收藏"
                        }
                    })
                }

            }
        },
        mounted(){
            let blogId = sessionStorage.getItem("blogId")
            if(blogId!=null){
                this.getBlogText(blogId)
            }
        }
    })
</script>
</html>